export const data = {
    key: "drawer-panel",
    title: "Drawer-Panel 抽屉面板",
    titleText: ["左右可展开，收起得弹框面板"],
    "CODEList": [
        {
            "title": "基础用法",
            "btnList": [],
            "imgs": [
                {
                    "title": "左侧",
                    "url": "1.png",
                    "width": "100px",
                    "height": "200px",
                    "isOpen": true
                },
                {
                    "title": "右侧",
                    "url": "2.png",
                    "width": "100px",
                    "height": "200px",
                    "isOpen": true
                },
            ],
            reactCode:`
            const APP = () => {
                return <>
                    <drawer-panel direction="left" />
                    <drawer-panel direction="right" />
                </>
            }
            `,
            reactHTML:`<p><font color="#008dff">const</font> APP = <font color="#999999">() =&gt; {</font></p><p><blockquote><p><font color="#f81d22">return</font> <font color="#999999">&lt;&gt;</font></p></blockquote></p><blockquote><p><blockquote><p><font color="#999999">&lt;</font><font color="#f81d22">drawer-panel</font> <font color="#0b8235">direction</font>=<font color="#999999">"left"</font> <font color="#999999">/&gt;</font></p><p><font color="#999999">&lt;</font><font color="#f81d22">drawer-panel</font> <font color="#0b8235">direction</font>=<font color="#999999">"right"</font> <font color="#999999">/&gt;</font></p></blockquote></p></blockquote><p><blockquote><p><font color="#999999">&lt;/&gt;</font></p></blockquote></p><p><font color="#999999">}</font></p>`,
            vueHTML:`<p><span class="code-punctuation">&lt;</span><span class="code-tag">template</span><span class="code-punctuation">&gt;</span></p><blockquote><p><span class="code-tag"><span class="code-punctuation">&lt;</span>drawer-panel&nbsp;<span class="code-attr-name">direction</span><span class="code-punctuation">=</span><span class="code-punctuation">"right"</span><span class="code-punctuation">&gt;<span class="code-def"></span></span><span class="code-punctuation">&lt;/</span><span class="code-punctuation"><span style="color: rgb(248, 29, 34);">drawer-panel</span>&gt;</span></span></p><p><span class="code-tag"><span class="code-punctuation"><span class="code-punctuation">&lt;</span><span style="color: rgb(248, 29, 34);">drawer-panel&nbsp;</span><span class="code-attr-name">direction</span><span class="code-punctuation">=</span><span class="code-punctuation">"left"</span><span class="code-punctuation">&gt;<span class="code-def"></span></span><span class="code-punctuation">&lt;/</span><span class="code-punctuation"><span style="color: rgb(248, 29, 34);">drawer-panel</span>&gt;</span></span></span></p></blockquote><p><span class="code-punctuation">&lt;/</span><span class="code-tag">template</span><span class="code-punctuation">&gt;</span></p>`,
            vueCode:`
                <template>
                    <drawer-panel direction="right"></drawer-panel>
                    <drawer-panel direction="left"></drawer-panel>
                </template>
            `
        }
    ],
    APIList: [
        {
            field: "direction",
            remark: "面板定位,目前支持”left“ ”right“",
            type: "string",
            default: "left"
        },
        {
            field: "width",
            remark: "面板宽度",
            type: "string",
            default: "300px"
        }
    ]
}